<template>
    <view :style="pageVarStyle" :class="contentClass" class="form-item-mb">
        <uni-forms
            ref="form"
            :modelValue="formData"
            :rules="formRules"
            validateTrigger="blur"
            :errShowType="errShowType"
            :labelWidth="labelWidth"
            :labelPosition="labelPosition"
            :labelAlign="labelAlign">
            <block :label="f.label" v-for="f of formConfig" :key="f.name">
                <uni-forms-item :label="f.label" :name="f.name" :class="f.type == 'text' ? 'form-item-height' : ''">
                    <template v-if="f.type == 'text'">
                        <uni-easyinput
                            type="text"
                            v-model="formData[f.name]"
                            :placeholder="f.placeholder"
                            :primaryColor="primaryColor" />
                    </template>

                    <template v-if="f.type == 'textarea'">
                        <uni-easyinput
                            type="textarea"
                            v-model="formData[f.name]"
                            :placeholder="f.placeholder"
                            :primaryColor="primaryColor" />
                    </template>

                    <template v-if="f.type == 'radio'">
                        <uni-data-checkbox v-model="formData[f.name]" :localdata="f.options" />
                    </template>

                    <template v-if="f.type == 'checkbox'">
                        <uni-data-checkbox v-model="formData[f.name]" multiple :localdata="f.options" />
                    </template>

                    <!-- 单个时间 -->
                    <template v-if="f.type == 'datetimesingle'">
                        <uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData[f.name]" />
                    </template>

                    <!-- picker选择器  -->
                    <template v-if="f.type == 'picker'">
                        <uni-data-picker v-model="formData[f.name]" :localdata="f.options" :popup-title="f.label">
                        </uni-data-picker>
                    </template>

                    <!-- select选择器 -->
                    <template v-if="f.type == 'select'">
                        <uni-data-select v-model="formData[f.name]" :localdata="f.options"> </uni-data-select>
                    </template>
                </uni-forms-item>
            </block>
        </uni-forms>

        {{ formData }}
        <button @click="submit">Submit</button>
    </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { addUnit, zipObject } from '@/utils/common'

const props = defineProps({
    // 传递过来的form表单配置
    formConfig: {
        type: Array,
        default: () => {
            return []
        },
    },
    // 表单默认值
    formValue: {
        type: Object,
    },

    // 主题色
    primaryColor: {
        type: String,
    },
    errShowType: {
        type: String,
        default: 'undertext',
    },
    validateTrigger: {
        type: String,
        default: 'submit', // submit  blur
    },
    // label 位置，默认 left 取值  top/left
    labelPosition: {
        type: String,
        default: 'left',
    },
    // label 居中方式，默认 left 取值 left/center/right
    labelAlign: {
        type: String,
        default: 'left',
    },
    // label 宽度
    labelWidth: {
        type: [String, Number],
        default: '',
    },

    // 表单项高度
    formItemHeight: {
        type: [String, Number],
        default: '80rpx',
    },
    // 表单项间距
    formItemMB: {
        type: [String, Number],
        default: '44rpx', // undertext : 最低高度为44rpx   |    toast    |   modal
    },
    // 表单的边框  全边框 all | 底部边框 bb | 无边框 none
    formItemBorder: {
        type: String,
        default: 'all',
    },
})

const formData = ref(
    props.formValue ||
        zipObject(
            props.formConfig.map((item) => item.name),
            props.formConfig.map((item) => item.value || ''),
        ),
)

const formRules = computed(() => {
    const rules = {}
    props.formConfig.forEach((item) => {
        if (item.rules) {
            rules[item.name] = { rules: item.rules }
        }
    })
    return rules
})

const form = ref()
function submit() {
    form.value
        .validate()
        .then((res) => {
            console.log('表单数据信息：', res)
        })
        .catch((err) => {
            console.log('表单错误信息：', err)
        })
}

const contentClass = computed(() => {
    return {
        'input-border-bottom': props.formItemBorder == 'bb',
        'input-border-none': props.formItemBorder == 'none',
    }
})
const formItemHeight = computed(() => addUnit(props.formItemHeight))
const formItemMB = computed(() => addUnit(props.formItemMB))

const pageVarStyle = computed(() => {
    return {
        '--form-item-height': formItemHeight.value,
        '--form-item-mb': formItemMB.value,
    }
})
</script>

<script>
export default {
    options: {
        styleIsolation: 'shared', // 解除样式隔离
        virtualHost: true,
    },
}
</script>

<style>
page {
    --form-item-height: 0rpx;
    --form-item-mb: 0rpx;
}
</style>

<style lang="scss" scoped>
.form-item-mb {
    ::v-deep {
        .uni-forms-item {
            margin-bottom: var(--form-item-mb);
        }
    }
}

.form-item-height {
    ::v-deep {
        .uni-easyinput__content {
            height: var(--form-item-height);
        }
        .uni-easyinput__content-input {
            height: var(--form-item-height);
        }
        .uni-forms-item__label {
            height: var(--form-item-height);
        }
    }
}

.input-border-bottom {
    ::v-deep {
        .uni-easyinput__content {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid transparent;
        }
    }
}

.input-border-none {
    ::v-deep {
        .uni-easyinput__content {
            border: none;
            border-radius: 0;
        }
    }
}
</style>
